<template>
  <div style="padding: 10px; margin: 50px 0;" class="father">
    <common-head></common-head>
      <!-- 头部标题标签 -->
      <header>
          <h4 class="title">{{detailData.title}}</h4>
          <div class="titleBottom">
            <span>发表时间: {{detailData.add_time}}</span>
            <span>点击次数: {{detailData.click}}</span>
          </div>
      </header>

      <!-- 主体内容区域 -->
      <div v-html="detailData.content" style="color:#535353"></div>

      <!-- 评论组件区域 -->
      <comment></comment>

    <common-footer></common-footer>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      detailData: {}
    }
  },
  created () {
    const artId = this.$route.query.id
    // 改变vuex中的文章id
    // 注意 必须在此组件渲染完之前改变 不然comment组件中拿不到正确的id
    this.getArtId(artId)
    //   console.log(this.$route.query.id);
    this.getDetail(artId)
  },
  methods: {
    ...mapMutations(['getArtId']),
    //   获取对应id详细信息
    async getDetail (id) {
      const { data: res } = await this.$http.get(`/api/getnew/${id}`)
      // 获取数据失败
      if (res.status === 1) this.$toast('获取资讯详情失败！')
      this.$toast('获取资讯详情成功！')
      this.detailData = res.message[0]
    }
  }
}
</script>

<style lang="less" scoped>
header {
  color: #226aff;
  border-bottom: 1px solid #ebedf0;
  .title {
    text-align: center;
    font-size: 14px;
    margin: 0;
    padding: 5px 0;
  }
  .titleBottom {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 13px;
  }
}
</style>
